"use client"

import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
import type { Table } from "@tanstack/react-table"
import { Settings2 } from "lucide-react"

import { Button } from "~/registry/miami/ui/button"
import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuLabel,
   DropdownMenuSeparator,
} from "~/registry/miami/ui/dropdown-menu"

interface DataTableViewOptionsProps<TData> {
   table: Table<TData>
}

export function DataTableViewOptions<TData>({
   table,
}: DataTableViewOptionsProps<TData>) {
   return (
      <DropdownMenu>
         <DropdownMenuTrigger asChild>
            <Button
               variant="outline"
               size="sm"
               className="ml-auto hidden h-8 lg:flex"
            >
               <Settings2 />
               View
            </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-[150px]">
            <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
            <DropdownMenuSeparator />
            {table
               .getAllColumns()
               .filter(
                  (column) =>
                     typeof column.accessorFn !== "undefined" &&
                     column.getCanHide(),
               )
               .map((column) => {
                  return (
                     <DropdownMenuCheckboxItem
                        key={column.id}
                        className="capitalize"
                        checked={column.getIsVisible()}
                        onCheckedChange={(value) =>
                           column.toggleVisibility(!!value)
                        }
                     >
                        {column.id}
                     </DropdownMenuCheckboxItem>
                  )
               })}
         </DropdownMenuContent>
      </DropdownMenu>
   )
}
